A demo of the Chrome-only dotted or dashed background grid

This uses the relatively new Chrome only addition to canvas from the canvas v5 specification - native dotted and dashed lines. As browsers add support you will be able to use the option in them too but currently (May 2013) it's only supported in Chrome.

obj.Set('background.grid.dashed', true);
obj.Set('background.grid.dotted', true);

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs1" width="600" height="250">[No canvas support]</canvas>
<canvas id="cvs2" width="600" height="250">[No canvas support]</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var line1 = new RGraph.Line({
            id: 'cvs1',
            data: [4,5,3,8,4,9,6,5,3],
            options: {
                labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                backgroundGridDashed: true,
                title: 'A dashed background grid',
                gutterTop: 35,
                textAccessible: true
            }
        }).draw();


        var line2 = new RGraph.Line({
            id: 'cvs2',
            data: [4,5,3,8,4,9,6,5,3],
            options: {
                labels: ['Mal', 'Barry', 'Gary', 'Neil', 'Kim', 'Pete', 'Lou', 'Fred', 'Jobe'],
                title: 'A dotted background grid',
                backgroundGridDotted: true,
                gutterTop: 35,
                textAccessible: true
            }
        }).draw();
    };
</script>